<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>添加银行卡</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/mui.picker.min.css" rel="stylesheet" />
		<link href="css/public.css" rel="stylesheet" />
		<link href="css/iconfont.css" rel="stylesheet" />
		<style type="text/css">
			body,.mui-content{
				background: #FFFFFF;
			}
			/*表单*/
			.mui-input-group .mui-input-row{
				height: 46px;
			}
			.mui-input-row label{
				padding:15px;
				font-size: 15px;
				color: #999999;
				width: 38%;
				text-align:justify;
				text-justify:inter-ideograph;
			}
			.mui-input-row label~select,.mui-input-row input[type=tel],.mui-input-row input[type=text],.mui-input-row input[type=password]{
				height: 46px;
				color: #333333;
				font-size: 15px;
				width: 62%;
			}
			.mui-input-row label~select{
				height: 45px;
			}
			.mui-input-group:before{
				height: 0;
			}
			.mui-input-group .mui-input-row:after{
				left: 0;
			}
			.mui-navigate-right:after, .mui-push-right:after{
				content: '\e581';
			}
			.address{
				width: 62%;
				display: inline-block;
				height: 46px;
				line-height: 46px;
				font-size: 15px;
				color: #333333;
			}
			.mt_20{
				margin-top: 20px;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav header">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		    <h1 class="mui-title">添加银行卡</h1>
		</header>
		<div class="mui-content" id="app">
			<form class="mui-input-group">
				<div class="mui-input-row">
			        <label>开户银行：</label>
			        <a class="mui-navigate-right"></a>
			        <select name="" id="">
			        	<option value="">中国工商银行</option>
			        </select>
			    </div>
			    <div class="mui-input-row">
			        <label>银行账号：</label>
			    	<input type="tel" class="mui-input-clear" maxlength="" placeholder="请输入银行账号">
			    </div>
			    <div class="mui-input-row">
			        <label>收款人姓名：</label>
			    	<input type="text" class="mui-input-clear" maxlength="" placeholder="请输入收款人姓名">
			    </div>
			   <div class="mui-input-row">
			        <label>开户省市：</label>
			        <a class="mui-navigate-right"></a>
			        <span id="address" class="address mui-ellipsis"></span>
			    </div>
			</form>
			<div class="mui-content-padded mt_20">
			    	<button type="button" class="my-btn btn-red">确定添加</button>
			</div>
		</div>
		<script src="js/mui.min.js"></script>
		<script src="js/app.js"></script>
		<script src="js/mui.picker.min.js"></script>
		<script src="js/city.data.js"></script>
		<script src="vue/vue.min.js"></script>
		<script type="text/javascript">
			(function($,doc){
				$.init();
				$.plusReady(function(){
					plus.webview.currentWebview().setStyle({
	                    scrollIndicator: 'none'
	             	});
	             	plus.webview.currentWebview().setStyle({
						//点击input时,调整屏幕的大小以便留出软键盘的空间
						softinputMode: "adjustResize"
					});
				});
				if($.os.plus){
					
				}else{
					//去掉头部标题栏
					doc.getElementsByClassName("mui-bar-nav")[0].style.display="none";
					doc.getElementById("app").style.paddingTop=0;
				}
				var el={
					address:doc.getElementById("address"),
				}
				var picker = new mui.PopPicker({
					 layer: 2
				});
				picker.setData(cityData);
				el.address.innerHTML=cityData[0].text+' '+cityData[0].children[0].text;
				el.address.addEventListener('tap',function(){
					var _this=this;
					picker.show(function(SelectedItem) {
						console.log(JSON.stringify(SelectedItem))
						_this.innerHTML=SelectedItem[0].text+'  '+SelectedItem[1].text;
					})
				});
			}(mui,document));
		</script>
	</body>

</html>